<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"
    />
    <title>代理模式</title>
    <style lang="css">
        .preload {
            display: block;
            width: 160px;
            height: 160px;
        }
    </style>
</head>

<body>
    <h2>虚拟代理合并http请求</h2>
    <p>先想象这样一个场景：每周我们都要写一份工作周报，周报要交给总监批阅。总监手下管理 着 150个员工，如果我们每个人直接把周报发给总监，那总监可能要把一整周的时间都花在查看 邮件上面。 现在我们把周报发给各自的组长，组长作为代理，把组内成员的周报合并提炼成一份后一次
        性地发给总监。这样一来，总监的邮箱便清净多了。 这个例子在程序世界里很容易引起共鸣，在 Web 开发中，也许最大的开销就是网络请求。 假设我们在做一个文件同步的功能，当我们选中一个 checkbox 的时候，它对应的文件就会被同
        步到另外一台备用服务器上面，</p>

    <input type="checkbox" id="1"></input>1
    <input type="checkbox" id="2"></input>2
    <input type="checkbox" id="3"></input>3
    <input type="checkbox" id="4"></input>4
    <input type="checkbox" id="5"></input>5
    <input type="checkbox" id="6"></input>6
    <input type="checkbox" id="7"></input>7
    <input type="checkbox" id="8"></input>8
    <input type="checkbox" id="9"></input>9

    <script type="text/javascript">
        var synchronousFile = function (id) {
            console.log('开始同步id ' + id)
        }

        var input = document.querySelectorAll('input')
        for (var i = 0; i < input.length; i++) {
            input[i].onclick = function () {
                if (this.checked === true) {
                    synchronousFile(this.id);
                }
            }

        }

    </script>

</body>

</html>